@import "function.scss";
$mainColor:#DC1136;//主题色
/*头部*/
.pub-header{
  background:#fff; _box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.23); border-bottom:solid 1px #d7d7d7\9; height: 60px; position: relative; z-index: 2;

  .name{color:$mainColor;font-size:20px;position:absolute;font-weight: bold; left:220px; top:16px; @include transition;}
  .user-info{float:right;margin:12px 40px 0 0;height:24px;}
  .user-header{margin:0 10px 0 0;vertical-align: middle}
  .username{color:#000;vertical-align:middle}
  .label{position:relative;width:24px;height:24px;display: inline-block;margin:0 8px 0 5px;vertical-align:middle;color:#666;}
  .num{position:absolute;height:16px;top:-7px; left:15px;background: $mainColor; color: #fff; font-size:12px;border-radius: 10px; padding:0 5px;}
  .icon{width:24px;height:24px;display:inline-block;}
  .nav{
    float:right; margin: 20px 20px 0 0;
    a{
      color:#444;font-size: 14px; padding:0 10px; border-right:solid 1px #ccc; height:16px; line-height: 16px; display:inline-block;
      :hover{color:$mainColor !important;}
    }
    :last-child{border:none;}
  }
}

.pub-menu-left{
  position: absolute;width:200px;position:relative; z-index: 3; overflow: auto;overflow-x:hidden;float:left;background:$mainColor;margin-top:-60px;
  .logo-block{padding:10px 0 20px 0;text-align:center;}
  .logo{top:8px;position: relative;width:55px;}
  .li{border-bottom:solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position:relative; z-index: 5;}
  .li.on{
    left: 0;background: #fff;
    .block{color:$mainColor !important;}
  }
  .li.on.nobg{background:#fff;}
  .li:hover .block{color:#ffdae1;}
  .block{
    height:60px;overflow:hidden; display: block; line-height:60px; cursor:pointer;color:#fff;font-size:16px;@include transition;transform: translateZ(0);-webkit-transform: translateZ(0);
    .icon{vertical-align:middle; margin:0 20px 0 10px;width:36px;height:36px;display: inline-block; text-align: center;line-height: 36px;font-size:30px;}
  }
  .li .nav-son{
    display: none;
    a{display: block; height: 40px; line-height: 40px; margin-right: 1px; text-align: left; color: #666;padding-left:72px; @include transition; background:#e8e8e8 no-repeat 20px top url()}
    a.on{color: $mainColor;background-position:20px -40px;}
    a:hover{color: $mainColor;}
  }
}
.pub-iframe{float:left;border:none; margin:10px 0 0 20px; position:relative;z-index:1;}


.small-screen{
  .pub-menu-left{
    position:absolute;left:0;width:60px;@include transition;z-index:2;
    .menu-name{display:none;}
    .block{background-image:none;}
    .li{overflow:hidden !important;height:61px !important;}
    .logo{width:40px;}
  }
  .pub-menu-left.hover{
    width:200px;
    .menu-name{display:inline;}
    .li{height:auto !important;}
  }
}